<template>
  <div>
    <div>
      <el-form :model="filterData" size="mini">
        <el-row :gutter="10">
          <el-col style="width:240px">
            <el-form-item>
              <el-date-picker type="daterange" v-model="filterData.daterange" start-placeholder="开始时间"
                end-placeholder="结束时间" value-format="yyyy-MM-dd" clearable style="width: 100%;" clearable>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col style="width:200px">
            <el-form-item>
              <el-input v-model="filterData.buycode" placeholder="采购单号" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width:200px">
            <el-form-item>
              <el-input v-model="filterData.title" placeholder="商品名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width:200px">
            <el-form-item>
              <el-input v-model="filterData.model" placeholder="规格型号" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width:200px">
            <el-form-item>
              <el-input v-model="filterData.supname" placeholder="供应商名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width:200px">
            <el-form-item>
              <el-select v-model="filterData.type" placeholder="退款类型" clearable>
                <el-option label="仅退款" value="1"></el-option>
                <el-option label="仅退货" value="2"></el-option>
                <el-option label="退款退货" value="3"></el-option>
                <el-option label="换货" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col style="width:200px">
            <el-form-item>
              <el-select v-model="filterData.status" placeholder="退款状态" clearable>
                <el-option label="退款中" value="0"></el-option>
                <el-option label="已完成" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col style="width:160px">
            <el-form-item>
              <el-input v-model="filterData.memo" placeholder="备注信息" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col style="width: 300px;display: flex;line-height: 30px;">
              <div style="width: 80px;">所属账套:</div>
              <el-select v-model="filterData.buyer" filterable placeholder="账套" style="width: 100%;" clearable>
                <el-option :label="item.name" :value="item.name" v-for="(item,index) in accounts" :key="index"></el-option>
              </el-select>
           </el-col>
          <el-col style="width: 100px;">
            <el-form-item label="" label-width="0">
              <el-button type="primary" icon='el-icon-search' @click="handleSearch">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div>
      <div style="margin:2px 0px;"><el-button type="primary" icon="el-icon-plus" size="mini"
          @click="handleCreate">新增退换记录</el-button></div>
    </div>

    <div class="table-wraper">
      <el-table border :data="tableData" height="100%"
        :header-cell-style="{'background-color': '#f5f7f9','color':'#666',border:'1px solid #f0f0f0'}">
        <el-table-column label="序号" type="index" width="50px" align="center" fixed="left"></el-table-column>
        <el-table-column label="申请日期" prop="req_date" width="100px" align="center">
          <template v-slot="scope">
            {{scope.row.req_date.split(" ")[0]}}
          </template>
        </el-table-column>
        <el-table-column label="采购单号" prop="buycode" width="110px" align="center"></el-table-column>
        <el-table-column label="类型" prop="type" align="center" width="90px">
          <template v-slot="scope">
            <span v-if="scope.row.type==1">仅退款</span>
             <span v-if="scope.row.type==2">仅退货</span>
             <span v-if="scope.row.type==3">退款退货</span>
             <span v-if="scope.row.type==4">换货</span>
             <span v-if="scope.row.type==5">优惠返点</span>
          </template>
        </el-table-column>
         <el-table-column label="销方名称" prop="seller" width="150px" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="商品名称" prop="title" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column label="规格型号" prop="model" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="品牌" prop="brand" width="80" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="单位" prop="unit" width="60px" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="数量" prop="count" align="center" width="60px"></el-table-column>
        <el-table-column label="单价" prop="price" align="center" width="90px"></el-table-column>
        <el-table-column label="总价" prop="total" align="center" width="90px"></el-table-column>
        <el-table-column label="发票" prop="tickettype" align="center" width="120px"> </el-table-column>


        <el-table-column label="退款金额" prop="amount" align="center" width="90px"></el-table-column>
        <el-table-column label="退款备注" prop="memo" align="left" show-overflow-tooltip></el-table-column>
                <el-table-column label="完成时间" prop="done_date" width="90px" align="center"></el-table-column>
        <el-table-column label="状态" prop="status" align="center" width="65px">
          <template v-slot="scope">
            <span v-if="scope.row.status==0" style="background-color:#F56C6C;color:#EEE;padding:2px 2px;">退款中</span>
            <span v-if="scope.row.status==1" style="background-color:#63A35C;color:#EEE;padding:2px 2px;">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="运费" prop="yunfei" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column label="供应商" prop="buyer" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" align="center" width="100px" fixed="right">
          <template v-slot="scope">
            <el-button-group>
              <el-button icon="el-icon-edit-outline" size="mini" circle
                @click="handleEdit(scope.$index,scope.row)"></el-button>
              <el-button icon="el-icon-delete" size="mini" type="danger" circle
                @click="handleDelete(scope.$index,scope.row)"></el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top: 10px; display: flex;">
      <div style="flex: 1;">
        <span>总额:{{sum.toFixed(2)}}</span>
        <span style="margin-left: 30px;">退款中:{{readysum.toFixed(2)}}</span>
        <span style="margin-left: 30px;">已退款:{{cancelsum.toFixed(2)}}</span>
      </div>
      <el-pagination class="pagination" prev-text="上一页" next-text="下一页" layout=" prev, pager, next,sizes,total"
        :page-sizes="[25, 50, 80]" :total="count" :page-size="pagesize" :current-page="curpage"
        @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>
    </div>

    <CreateUI v-if="createVisbile" ref="createUI" @complete="handleSearch()"></CreateUI>
    <EditUI v-if="editVisible" ref="editUI" @update="handleEditCallback"></EditUI>
  </div>
</template>

<script>
  import CreateUI from './create.vue';
  import EditUI from './edit.vue';
  export default {
    components: {
      CreateUI,
      EditUI
    },
    data() {
      return {
        filterData: {
          daterange: [],
          title: "",
          model: '',
          supname: '',
          buyer:'',
          buycode: '',
          type: '',
          account:'',
          status: '',
          memo: ''
        },
        accounts:[],
        sum: 0,
        readysum: 0,
        cancelsum: 0,
        createVisbile: false,
        editVisible: false,
        curpage: 1,
        pagesize: 25,
        count: 1,
        tableData: []
      }
    },
    created() {
      this.loadAccount();
      this.loadDataList();
    },
    methods: {
      loadAccount(){
        this.axios.post("api/admin/account/list").then(res=>{
          if(res.status==200&& res.data.code==0){
             this.accounts=res.data.list;
          }
        })
      },
      loadDataList() {
        const params = {
          daterange: this.filterData.daterange,
          curpage: this.curpage,
          pagesize: this.pagesize,
          title: this.filterData.title,
          model: this.filterData.model,
          supname: this.filterData.supname,
          type: this.filterData.type,
          buyer:this.filterData.buyer,
          buycode: this.filterData.buycode,
          status: this.filterData.status,
          memo: this.filterData.memo
        }
        this.axios.post("api/admin/buyexchange/list", params).then(res => {
          if (res.status == 200 && res.data.code == 1) {
            this.tableData = res.data.list;
            this.count = res.data.numrows;
            this.sum = res.data.sum;
            this.cancelsum = res.data.cancelsum;
            this.readysum = res.data.readysum;
          }
        })
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
      handleCreate: function() {
        this.createVisbile = true;
        this.$nextTick(() => {
          this.$refs.createUI.dialogVisible = true;
          this.$refs.createUI.init();
        })
      },
      handleSearch() {
        this.curpage = 1;
        this.loadDataList();
      },
      handleEdit(index, data) {
        this.editVisible = true;
        this.$nextTick(() => {
          this.$refs.editUI.dialogVisible = true;
          this.$refs.editUI.init(index, JSON.parse(JSON.stringify(data)));
        })
      },
      handleEditCallback(index, data) {
        this.tableData[index].type = data.type;
        this.tableData[index].status = data.status;
        this.tableData[index].memo = data.memo;
        this.tableData[index].done_date = data.done_date;
      },

      handleDelete(index, data) {
        this.$confirm("确定要删除此退换货记录吗？", "确认").then(res => {
          this.axios.post("api/admin/buyexchange/delete", {
            id: data.id
          }).then(res => {
            if (res.status == 200 && res.data.code == 1) {
              this.$message.success({
                message: res.data.msg,
                duration: 1500,
                showClose: true
              });
              this.loadDataList();
            } else {
              this.$message.error({
                message: res.data.msg,
                duration: 1500,
                showClose: true
              });
            }
          })
          console.log(res);
        }).catch(() => {

        })
      }
    }
  }
</script>

<style scoped>
  .table-wraper {
    height: calc(100vh - 220px);
  }
</style>
